<template>
  <div>
    <Form ref="ref" :model="form" :rules="relus" lable="80">
      <FormItem lable="书名称" prop="name">
        <Input v-model="form.name" style="width: 350px" placeholder="请输入书名称"></Input>
      </FormItem>
      <FormItem prop="author" lable="作者">
        <Input v-model="form.author" placeholder="请输入作者名称" style="width: 350px"></Input>
      </FormItem>
      <FormItem lable="出版社" prop="publish">
        <Input v-model="form.publish" placeholder="请输入出版社名称" style="width: 350px"></Input>
      </FormItem>
      <FormItem lable="标准书号" prop="ISBN">
        <Input v-model="form.ISBN" placeholder="请输入标准书号" style="width: 350px"></Input>
      </FormItem>
      <FormItem lable="书的介绍" prop="introduction">
        <Input v-model="form.introduction" placeholder="请输入输的介绍" style="width: 350px"></Input>
      </FormItem>
      <FormItem lable="语言" prop="language">
        <Input v-model="form.language" placeholder="请输入语言" style="width: 350px"></Input>
      </FormItem>
      <FormItem lable="价格信息" prop="price">
        <Input v-model="form.price" placeholder="请输入价格信息" style="width: 350px"></Input>
      </FormItem>
      <FormItem lable="出版时间" prop="pub_date">
        <DatePicker v-model="form.pub_date"  type="date" placeholder="请选择出版时间"></DatePicker>
      </FormItem>
      <FormItem lable="图书类型" prop="type_id">
        <Select v-model="form.type_id" style="width: 350px" prop="type_id">
          <Option v-for="item in typeList" :value="item.name"  :key="item.name">{{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <FormItem>
        <Button @click="add" style="margin: 5px" type="primary">提交</Button>
        <Button @click="quxiao">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  name: "addBook",
  data() {
    return {
      form: {
        name: null,
        author: null,
        publish: null,
        ISBN: null,
        introduction: null,
        language: null,
        price: null,
        pub_date: null,
        type_id: null,
      },
      relus: {
        name: [{required: true, message: '请输入书籍名称'}],
        author: [{required: true, message: '请输入作者'}],
        publish: [{required: true, message: '请输入出版社'}],
        ISBN: [{required: true, message: '请输入标准书号'}],
        introduction: [{required: true, message: '请输入书的介绍'}],
        language: [{required: true, message: '请输入语言'}],
        price: [{required: true, message: '请输入语言'}],
        pub_date: [{required: true, message: '请输入出版时间'}],
        type_id: [{required: true, message: '请输入图书类型'}]
      },
    }
  },
  methods: {
    add() {
      this.$refs['ref'].validate(valid => {
        if (valid) {
          this.form.pub_date = (new Date(this.form.pub_date)).toLocaleDateString()
          this.http.post("setInformation",this.qs.parse(this.form)).then(res=>{
            if (res.data){
              this.$Message.success('添加成功')
              this.$emit("hideDialog");
              this.$emit("after")
            }else {
              this.$Message.error('添加失败')
            }
          })

        }
      })
    },
    quxiao(){
      this.$emit("hideDialog")
    }
  },
  computed:{
    typeList(){
      return this.$store.state.type
    }
  }
}
</script>


<style scoped>

</style>
